<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;

      }

      #content {
        width: 978px;

        background: url(images/login_bg.gif) no-repeat;
        background-size: 100%;
        margin: auto;
        overflow: auto;
      }

      .box {
        width: 978px;
        margin-top: 60px;
      }

      .login-bg {
        margin-left: 30px;
      }

      .register-bg {
        margin-top: 24px;
        margin-left: 30px;
      }

      .left-box {
        float: left;
        width: 485px;
      }

      .left-box ul {
        list-style: url(images/list_icon.gif);
        margin-left: 40px;
      }

      .left-box ul li {
        padding-top: 15px;
      }

      table {
        margin: auto;
      }

      table a {
        display: block;
        text-align: center;
        padding-top: 10px;
      }

      #line {
        width: 1px;
        background-color: grey;
        float: left;
        height: 500px;
      }

      .right-box {
        width: 485px;
        float: right;
      }

      .right-box ul {
      }

      .right-box ul li {
        padding-top: 15px;
        list-style: none;
      }

      .right-box ul li a {
        text-decoration: none;
      }

      .right-box ul li i {
        display: inline-block;
        width: 30px;
        height: 30px;
        background: url(images/icon.gif) no-repeat;
        background-position: 0px -130px;
        vertical-align: middle;
        padding-left: 15px;
      }

      .right-box ul li:nth-child(2) i {
        background-position: 0px -170px;
      }

      .right-box ul li:nth-child(3) i {
        background-position: 0px -210px;
      }

      .right-box ul li:nth-child(4) i {
        background-position: 0px -250px;
      }

      .registernow {
        text-align: center;
      }

      .main {
        width: 400px;
        border: 1px solid coral;
        background: #f6f3d4;
        margin: auto;
        margin-top: 20px;
      }

      .main p a {
        color: black;
      }

      .main p {
        width: 250px;
        border: 1px solid coral;
        margin: 20px auto;
        padding-left: 20px;
        background-color: white;
      }

      .main p i {
        display: inline-block;
        width: 25px;
        height: 30px;
        background: url(images/icon.gif) no-repeat;
        background-position: -15px -280px;
        vertical-align: middle;
      }

      .main :nth-child(2) i {
        background-position: -15px -318px;
      }
    </style>
  </head>

  <body>
    <div style="width: 1024px; margin: auto">
      <iframe
        src="head.html"
        frameborder="0"
        width="1024"
        scrolling="no"
      ></iframe>
      <div id="content">
        <div class="box">
          <div class="left-box">
            <img src="images/title_login_2.png" alt="" class="login-bg" />
            <table>
              <tr>
                <td>会员名:</td>
                <td><input type="text" />(可包含a-z丶0-9和下划线)</td>
              </tr>
              <tr>
                <td>密码:</td>
                <td><input type="text" />(至少包含6个字符)</td>
              </tr>
              <tr>
                <td colspan="2">
                  <a href="#"><img src="images/login.gif" alt="" /></a>
                </td>
              </tr>
            </table>
            <ul>
              <li><a href="javascript:"> 什么是安全登录。</a></li>
              <li>
                香港会员（繁体中文用户）由此 <a href="javascript:"> 登入</a>
              </li>
              <li><a href="javascript:"> 密码安全贴士。</a></li>
              <li>
                防止病毒或者木马窃取您的账户信息，<a href="javascript:"
                  >在线检查</a
                >您的电脑是否安全。
              </li>
            </ul>
          </div>
          <div id="line"></div>
          <div class="right-box">
            <img src="images/register.gif" alt="" class="register-bg" />
            <ul>
              <li>
                <a href="javascript:"><i></i> 便宜有好货！</a
                >超过7000万件商品任你选。
              </li>
              <li>
                <a href="javascript:"><i></i>买卖更安全！</a>交易超安全。
              </li>
              <li>
                <a href="javascript:"><i></i>免费开网店！</a>轻松赚钱交友。
              </li>
              <li>
                <a href="javascript:"><i></i>超人气社区！</a>彩活动每一天
              </li>
            </ul>
            <p class="registernow">
              <a href="javascript:"
                ><img src="images/registernow.gif" alt=""
              /></a>
            </p>
            <div class="main">
              <p><i></i> 您已经是会员？ <a href="javascript:">由此登入</a></p>
              <p><i></i> 繁体中文用户由此 <a href="javascript:">注册</a></p>
            </div>
          </div>
        </div>
      </div>
      <iframe
        src="footer.html"
        frameborder="0"
        width="1024"
        scrolling="no"
      ></iframe>
    </div>
  </body>
</html>
